<?php include "header.php"?>
<style>
    #optPage .layui-layer-content{padding-top: 0!important;}
    .layui-upload-list{padding-top: 10px; margin: unset!important;}
    #tuozhuai{width:450px;margin: 15px 25px 15px 0;background-color: unset!important;color: #aaa;border:1px dashed #aaa}
</style>
<body style="margin:0">
<div class="layui-upload" style="padding: 0 2%">
    <div class="layui-upload-list">
        <table class="layui-table" style="margin-bottom: 80px">
            <thead>
            <tr><th>文件名</th>
                <th>大小</th>
                <th>状态</th>
                <th>操作</th>
            </tr></thead>
            <tbody id="demoList"></tbody>
        </table>
    </div>
</div>
<div class="laypage-top-div" style="text-align: right;background-color: #FFFFFF;position: fixed;bottom: 0;width: 100%;">
    <button class="layui-btn" id="tuozhuai"><span class="colorlan">选择文件</span> 或 直接拖拽文件到这里上传</button>
    <!-- <button class="layui-btn layui-btn-self-lan" id="testList" style="margin: 15px 25px 15px 0;">选择文件</button> -->
    <button class="layui-btn layui-btn-self-lan" id="testListAction" style="margin: 15px 25px 15px 0;display: none">选择文件</button>
    <button class="layui-btn layui-btn-self-lan" id="successAction" style="margin: 15px 25px 15px 0;background-color: #409EFF!important;">确定</button>
</div>
<script type="text/javascript">
    var param_listdom = getQueryVariable('listdom');
    var param_trIndex = getQueryVariable('trIndex');
    var param_nums = getQueryVariable('nums') || '';

    layui.use(['upload','layer'], function(){
        var upload = layui.upload;
        var layer_index = null;

        var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#tuozhuai'
            ,url: server_api_name+ask_upload_file
            ,accept: 'file'
            ,multiple: true
            ,auto: false
            ,contentType: false
            ,processData: false
            ,async: false
            ,bindAction: '#testListAction'
            ,before: function(obj){
                layer_index = layer.load();
                this.data={token: facade.getCookie('token')};
            }
            ,choose: function(obj){
                layer.load();
                var files = this.files = obj.pushFile();
                //读取本地文件
                obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'</td>'
                        ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                        ,'<td>等待上传</td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide" style="margin-right:10px">重传</button>'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        ,'</td>'
                        ,'</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
                setTimeout(function () {
                    $("#testListAction").click();
                },500)
            }
            ,done: function(res, index, upload){
                layer.close(layer_index);
                layer.closeAll('loading'); //关闭loading
                if(res.code == 2000){
                    if(res.data.error > 0){
                        layer.msg('上传失败');return false;
                    }
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    var filename = res.data.name;
                    var fileext = res.data.ext;
                    var filepath = res.data.encpath;
                    var id = res.data.id;
                    var filesize = res.data.size;
                    var created_user = res.data.created_user_name;
                    var created_at = res.data.created_at;
                    var file_info = '';
                    file_info = '<span class="files" style="display:none;" filename="'+filename+'" filepath="'+filepath+'" id="'+id+'"' +
                        'filesize="'+filesize+'" fileext="'+fileext+'" created_user="'+created_user+'" created_at="'+created_at+'"></span>';
                    tds.eq(2).html('<span style="color: #248BFE;">上传成功</span>'+file_info);
                    tds.eq(3).html('<button onclick="del_file(this)" class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'); //清空操作
                    return delete this.files[index];
                }else{
                    layer.msg(res.data.msg);
                }
                this.error(index, upload);
            }
            ,error: function(index, upload){
                layer.closeAll('loading'); //关闭loading
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    });


    function del_file(obj){
        layer.confirm('确定要删除该文件吗？',function(index){
            $(obj).parents('tr').remove();
            layer.close(index);
        });
    }

    $('#successAction').click(function(){
        var length = $('.files').length;
        if(length == undefined || length == 0){
            layer.msg('请上传附件信息');return false;
        }


        var detaStr = '';
        $('.files').each(function(){
            var filename = $(this).attr('filename');
            var filepath = $(this).attr('filepath');
            var fileurl = get_file_complete(filepath);
            var id = $(this).attr('id');
            var fileext = $(this).attr('fileext');


            detaStr += '<div fileid="'+id+'">';
            if(fileext == 'png' || fileext == 'pneg' || fileext == 'jpg' || fileext == 'jpeg' || fileext == 'gif'){
                detaStr += '<span onclick="upload_files_deta_viewer_img_show(\''+param_listdom+'\')">'+filename+'</span>';
                detaStr += '<img class="detaimg'+id+'" src="'+fileurl+'" style="height: 0" data_src="'+fileurl+'">';
            }else if(fileext == 'pdf'){
                detaStr += '<span onclick="upload_files_viewer_pdf_show(\''+fileurl+'\')">'+filename+'</span>';
            }else if(fileext == 'doc' || fileext == 'docx' || fileext == 'xls' || fileext == 'xlsx' || fileext == 'ppt' || fileext == 'pptx'){
                detaStr += '<span onclick="upload_files_vieweroffice_show(\''+fileurl+'\')">'+filename+'</span>';
            }else{
                detaStr += '<span onclick="upload_files_show_yulan_not()">'+filename+'</span>';
            }
            detaStr += '<i class="fa fa-times-circle shan" onclick="public_list_file_deta_del(this, \''+param_listdom+'\')"></i>';
            detaStr += '</div>';

        });


        $('#'+param_listdom+' tr',parent.document).eq(param_trIndex).find('.upload_deta_con'+param_nums).append(detaStr);

        if (typeof(window.parent.upload_files_deta_file_viewer)!="undefined"){
            setTimeout(function () {
                window.parent.upload_files_deta_file_viewer(param_listdom);
            },200)
        }
        layer_close();
    });
</script>
</body>
</html>
